<template>
  <div class="image-display-list">
    <!-- 空数据显示 -->
    <span
      v-if="
        !modelValue || (Array.isArray(modelValue) && modelValue.length === 0)
      "
      class="empty-placeholder"
    >
      -
    </span>

    <!-- 单个图片显示 -->
    <div v-else-if="!Array.isArray(modelValue)" class="single-image-container">
      <el-image
        :src="modelValue"
        :preview-src-list="[modelValue]"
        class="single-image"
        fit="cover"
        :lazy="lazy"
        :preview-teleported="previewTeleported"
        @error="handleImageError"
        @load="handleImageLoad"
      >
        <template #error>
          <div class="image-error">
            <el-icon><Picture /></el-icon>
            <span>加载失败</span>
          </div>
        </template>
      </el-image>
    </div>

    <!-- 多个图片显示 -->
    <div v-else class="multiple-images-container">
      <el-image
        v-for="(imageUrl, index) in validImages"
        :key="index"
        :src="imageUrl"
        :preview-src-list="validImages"
        :initial-index="index"
        class="multiple-image"
        fit="cover"
        :lazy="lazy"
        :preview-teleported="previewTeleported"
        @error="handleImageError"
        @load="handleImageLoad"
        @click="handleImageClick(imageUrl, index)"
      >
        <template #error>
          <div class="image-error">
            <el-icon><Picture /></el-icon>
          </div>
        </template>
      </el-image>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { ElImage, ElIcon } from 'element-plus';
import { Picture } from '@element-plus/icons-vue';

// 定义组件属性
const props = defineProps({
  // 【修改 1】: 将 'imageData' 重命名为 'modelValue'，以支持 v-model
  modelValue: {
    type: [String, Array],
    default: null,
  },
  // 是否懒加载
  lazy: {
    type: Boolean,
    default: true,
  },
  // 预览是否传送到body
  previewTeleported: {
    type: Boolean,
    default: true,
  },
  // 单图尺寸
  singleImageSize: {
    type: String,
    default: '50px',
  },
  // 多图尺寸
  multipleImageSize: {
    type: String,
    default: '50px',
  },
  // 多图间距
  imageGap: {
    type: String,
    default: '8px',
  },
});

// 计算有效的图片列表（过滤空值）
const validImages = computed(() => {
  // 【修改 3】: 将 props.imageData 改为 props.modelValue
  if (!Array.isArray(props.modelValue)) return [];
  return props.modelValue.filter((url) => url && typeof url === 'string');
});

// 定义事件
// 【修改 2】: 添加 'update:modelValue' 事件定义，以支持 v-model 的双向绑定
const emit = defineEmits([
  'update:modelValue',
  'imageClick',
  'imageLoad',
  'imageError',
]);

// 处理图片点击
const handleImageClick = (imageUrl, index) => {
  emit('imageClick', { url: imageUrl, index });
};

// 处理图片加载成功
const handleImageLoad = (event) => {
  emit('imageLoad', event);
};

// 处理图片加载失败
const handleImageError = (event) => {
  emit('imageError', event);
};

// 如果需要在组件内部修改图片数据（例如删除图片），可以调用此函数
// const removeImage = (index) => {
//   if (Array.isArray(props.modelValue)) {
//     const newValue = [...props.modelValue];
//     newValue.splice(index, 1);
//     emit('update:modelValue', newValue); // 触发 v-model 更新
//   }
// };
</script>

<style scoped>
/* 样式部分保持不变 */
.image-display-list {
  display: flex;
  flex-direction: column;
}

.empty-placeholder {
  color: #909399;
  font-style: italic;
  font-size: 14px;
}

.single-image-container {
  display: inline-block;
}

.single-image {
  width: v-bind(singleImageSize);
  height: v-bind(singleImageSize);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.single-image:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.multiple-images-container {
  display: flex;
  flex-wrap: wrap;
  gap: v-bind(imageGap);
  align-items: flex-start;
}

.multiple-image {
  width: v-bind(multipleImageSize);
  height: v-bind(multipleImageSize);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.multiple-image:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 12px;
  border-radius: 4px;
}

.image-error .el-icon {
  font-size: 16px;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .multiple-images-container {
    gap: 6px;
  }

  .single-image,
  .multiple-image {
    border-radius: 3px;
  }
}

:deep(.el-image-viewer__wrapper) {
  z-index: 9999;
}

:deep(.el-image__inner) {
  transition: all 0.3s ease;
}

:deep(.el-image__inner:hover) {
  transform: scale(1.02);
}
</style>
